// pages/home/home-nav/medical-condition/bmi-control/bmi-chart-polyline/bmi-chart-polyline.ts
// @ts-ignore
import * as echarts from '../../../../../../components/ec-canvas/echarts';
import { initEcharts } from '../../../../../../utils/util'

var option = {
  grid: {
    containLabel: true, // 添加这一行
    x: 30, // 左
    y: 30, // 上
    x2: 30, // 右
    y2: 0, // 下
  },
  tooltip: {
    trigger: 'axis',
    position: ['10%', '20%'],
    textStyle: {
      fontSize: 10 // 字体大小
    },
  },
  xAxis: {
    data: null,
    axisLabel: {
      interval: 0, // 设置数据间隔
      textStyle: {
        fontSize: '10',
      }
    },
  },
  yAxis: {
    name: 'kg/m2',
    type: 'value',
    axisLabel: {
      interval: 0, // 设置数据间隔
      textStyle: {
        fontSize: '10',
      }
    },
  },
  series: [{
    data: null,
    type: 'line',
  }],
};

Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true // 延迟加载
    },
    realData: <ChartData>{
      categories: ['5月27日', '5月28日', '5月29日', '5月30日', '5月31日', '6月1日', '6月2日'],
      data: [30, 40, 50, 40, 60, 50, 70],
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeChart() {
      // 更新数据重新数据初始化
      const canvasComponent = this.selectComponent("#bmi-chart-polyline");
      // note: 动态获取数据后更新this.data.realData，即可。
      const numchartType = this.data.realData;
      const options = this.changeOptionsData(numchartType)
      initEcharts(options, canvasComponent);
    },
    // 传入动态数据
    changeOptionsData(initData: any) {
      option.series[0].data = initData.data
      option.xAxis.data = initData.categories
      return option;
    },
    updateChartData(data: ChartData) {
      this.setData({
        realData: data,
      })
      this.changeChart();
    }
  },

  /*
  * 组件所在页面的生命周期
  */
  pageLifetimes: {
    show: function () {
      this.changeChart();
    },
  },
})